<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加订单</title>
    <script src="./lib/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="./lib/elementui-index.js"></script>
    <script src="./lib/axios.min.js"></script>
    <script src="./lib/token.js"></script>
</head>
<body>
    <div id="app">
        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
            <el-tag type="info">订单信息</el-tag>

            <el-form-item label="合同编号" prop="ooid">
                <el-row :gutter="20">
                    <el-col :span="12"><div class="grid-content bg-purple">
                        <el-input v-model="form.ooid"></el-input>
                    </div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">
                        <span style="color: red;">{{this.result.message}}</span>
                        <span style="color: green;">{{this.result.message2}}</span>
                    </div></el-col>
                  </el-row>


            </el-form-item>
            <el-form-item label="订货时间">
                <div class="block">
                    <el-date-picker
                      v-model="form.dtime"
                      type="datetime"
                      placeholder="选择日期时间">
                    </el-date-picker>
                </div>
            </el-form-item>
            <el-form-item label="交货时间">
                <div class="block">
                    <el-date-picker
                      v-model="form.jtime"
                      type="datetime"
                      placeholder="选择日期时间">
                    </el-date-picker>
                </div>
            </el-form-item>
            <el-form-item label="产品要求">
                <el-input v-model="form.orequire"></el-input>
            </el-form-item>

            <el-tag type="info">客户信息</el-tag>
            <el-form-item label="公司名称">
                <el-input v-model="customer.cname"></el-input>
            </el-form-item>
            <el-form-item label="公司联系人">
                <el-input v-model="customer.cuser"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="ctel">
                <el-input v-model="customer.ctel"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="customer.caddr"></el-input>
            </el-form-item>
            <el-form-item label="客户负责人">
                <el-input v-model="customer.cperson"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addOrder('form')">添加</el-button>
            </el-form-item>
        </el-form>
    </div>

    <script>
        new Vue({
            el:"#app",
            data() {
                var checkOamount = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('产品合同数不能为空'));
                    }
                    if (!(/(^[1-9]\d*$)/.test(value))) {
                        callback(new Error('请输入正整数'));
                    }else{
                        if(value <= 0){
                            callback(new Error("产品合同数需要大于0"))
                        }else{
                            callback()
                        }
                    }
                };
                var checkOoid = (rule, value, callback) => {
                    if (!value) {
                        this.result.message = ''
                        this.result.message2 = ""
                        return callback(new Error('合同编号数不能为空'));

                    }
                    if (!(/(^[1-9]\d*$)/.test(value))) {
                        this.result.message = ''
                        this.result.message2 = ""
                        callback(new Error('请输入数字值'));

                    }else{
                        // 判断ooids是否重复
                        //axios.get()
                        this.queryCount()
                    }
                };
                return {
                    form: {  
                        ooid:'',      
                        dtime:'',
                        jtime:'',
                        orequire:'',
                        oamount:''
                    },
                    customer:{
                        cname:'',
                        cuser:'',
                        ctel:'',
                        cperson:'',
                        caddr:''
                    },
                    result:{
                        message:'',
                        message2:''
                    },
                    color:'',
                    rules: {
                        ooid: [
                            { validator: checkOoid, trigger: 'blur' }
                        ],
                        oamount: [
                            { validator: checkOamount, trigger: 'blur' }
                        ],
                    }
                }
            },
            methods: {
                addOrder(formName){
                    console.log(this.form)
                    console.log(this.customer)
                    if(this.form.ooid === ''){
                        this.$message.error("订单编号不能为空")
                        return;
                    }
                    //axios.post("http://localhost:8002/orders/add",this.form)
                    axios.post("http://localhost:8001/production/orders/add",{
                        ooid:this.form.ooid,      
                        dtime:this.form.dtime,
                        jtime:this.form.jtime,
                        orequire:this.form.orequire,
                        oamount:this.form.oamount,
                        cname:this.customer.cname,
                        cuser:this.customer.cuser,
                        ctel:this.customer.ctel,
                        cperson:this.customer.cperson,
                        caddr:this.customer.caddr
                    })
                    .then(res=>{
                        //this.$message()
                        //console.log(flower.fid)
                        console.log(1212111121121)
                        console.log(res.data)
                        if(res.data.code === 20000){
                            this.$message.success("添加成功")
                            sessionStorage.ooid = this.form.ooid
                            location.href = "addProduct.html"
                        }else{
                            this.$message.error("添加失败")
                        }
                    })
                },
                queryCount(){
                    if(this.form.ooid !== ''){
                        axios.get(`http://localhost:8001/production/orders/queryCount?ooid=${this.form.ooid}`)
                        .then(res=>{
                            if(res.data.code == "20000"){
                                this.result.message2 = ''
                                this.result.message = "订单编号已存在"
                            }else{
                                this.result.message = ''
                                this.result.message2 = "订单编号可用"
                            }
                        })
                    }else{
                        this.result.message = ''
                        this.result.message2 = ""
                    }
                }
            }
        })
    </script>
</body>
</html>